<template>
  <div class="realTime">
    <!--左边窗口-->
    <div style="background-color: #fff; height: 100%; overflow: hidden">
      <div class="videoWindow" ref="playWnd">
        <div class="video_top" style="top: 0;">
          <span style="margin-left: 20px;">设备序列号:{{ deviceId }}</span>
          <span style="margin-left: 20px;">设备名称:{{ deviceName }}</span>
        </div>
        <div class="video_top" v-show="ptz >= 1" style="bottom: 0;justify-content: flex-end;height: .4rem;">
          <!-- 云台 -->
          <img src="../../../static/img/qh.png" alt="" @click="btn_cut(Ycut,Ncut)" v-show="length >= 2">
          <img src="../../../static/img/fd.png" alt="" @click.stop="btn_big('zoomin')" @mouseup="btn_stop" v-show="ptz >= 1">
          <img src="../../../static/img/sx.png" alt="" class="img_sx" @click.stop="btn_small('zoomout')"
            @mouseup="btn_stop" v-show="ptz >= 1">
          <img @click.stop="btn_imgs" src="../../../static/img/move.png" alt=""
            style="border-radius: 50%; margin: 0 .1875rem;width: .375rem;" v-show="ptz >= 1">
        </div>
        <video autoplay :src="videoUrl" controls style="width: 100%; height: 97%;"></video>
        <div class="img_box" @mouseup="btn_stop">
          <img v-show="switchs" src="../../../static/img/fx.png" alt="">
          <div class="lucency" v-show="switchs">
            <!-- 上 -->
            <div class="lucency_top" @mousedown.stop="btn_direction('up')" :class="direction == 'up' ? 'top' : ''"></div>
            <!-- 下 -->
            <div class="lucency_bottom" @mousedown.stop="btn_direction('down')" :class="direction == 'down' ? 'top' : ''">
            </div>
            <!-- 左 -->
            <div class="lucency_left" @mousedown.stop="btn_direction('left')" :class="direction == 'left' ? 'top' : ''">
            </div>
            <!-- 右 -->
            <div class="lucency_right" @mousedown.stop="btn_direction('right')"
              :class="direction == 'right' ? 'top' : ''"></div>
          </div>
        </div>
      </div>
      <!--右边列表-->
      <div class="list">
        <div class="videoList_title">
          <span>设备列表</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>设备名称</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in eqList" :key="index">
              <td :class="active == index ? 'red' : ''" @click="
                toggle(
                  item.channels[0].imei, // 设备国标编号
                  item.channels[0].channelNumber,// 通道国标编号
                  index,
                  item.imei, // 设备序列号
                  item.deviceName, // 设备名称
                  item.channels,
                  item.channels[0].ptz
                )
                ">
                {{ item.deviceName }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../../utils/http";
import api from "../../utils/api";
export default {
  data() {
    return {
      areaId: "",
      eqList: [],
      // 设备国标编号
      deviceNo: null,
      // 通道国标编号
      channelNo: null,
      active: 0,
      // 视频链接
      videoUrl: "",
      cut: false,
      // 设备名称
      deviceName: "",
      // 设备序号
      deviceId: "",
      // 切换
      switchs: false,
      // 方向
      direction: 'stop',
      // 是否显示控制云台
      ptz: 0,
      Ycut: [],
      Ncut: [],
      num:1,
      length:0
    };
  },
  created() {
    this.areaId = sessionStorage.getItem("area");
    console.log(sessionStorage.getItem("area"));
    this.getList();
  },
  mounted() { },

  methods: {
    // 设备列表
    async getList() {
      let res = []
      //       // 五道峡
      if (this.areaId == "0000108") {
        res = await http.get(api.WuDeviceApi);
      } else {
        // 南河(0000034）
        res = await http.get(api.NanDeviceApi + this.areaId);
      }
      this.eqList = res.data.data.webcams;
      console.log(this.eqList);
      // 设备编号
      let deviceNo = res.data.data.webcams[0].channels[0].imei;
      // 通道编号
      let channelNo = res.data.data.webcams[0].channels[0].channelNumber;
      // 设备名称
      this.deviceName = res.data.data.webcams[0].deviceName
      // 设备序号
      this.deviceId = res.data.data.webcams[0].imei
      this.toggle(deviceNo, channelNo, 0, res.data.data.webcams[0].imei, res.data.data.webcams[0].deviceName, res.data.data.webcams[0].channels[0].ptz);
    },
    // tab切换
    toggle(deviceNo, channelNo, index, imei, deviceName, item, ptz) {
      // this.Ycut = []
      this.switchs = false
      this.Ncut = []
      this.active = index;
      this.deviceName = deviceName
      this.deviceId = imei
      this.ptz = ptz
      if (item.length == 0) {
        this.deviceNo = deviceNo;
        this.channelNo = channelNo
      } else {
        for (let i = 0; i < item.length; i++) {
          this.length = item.length
          // this.Ncut.push({
          //     deviceNo: item[i].imei,
          //     channelNo: item[i].channelNumber,
          //     ptz: item[i].ptz,
          //   });
          if (item[i].ptz == 0) {
            this.Ncut.push({
              deviceNo: item[i].imei,
              channelNo: item[i].channelNumber,
              ptz: item[i].ptz,
            });
          } else[
            this.Ycut.push({
              deviceNo: item[i].imei,
              channelNo: item[i].channelNumber,
              ptz: item[i].ptz,
            })
          ]
        }
      }
      this.getRealTime(deviceNo, channelNo);
    },
    // 实时预览
    async getRealTime(d, c) {
      let res = await http.get(api.ButtApi + "/" + d + "/" + c);
      if (res.data.code == 0) {
        this.videoUrl = res.data.data.fmp4;
      } else {
        this.$message({
          message: res.data.msg,
          type: "warning"
        });
      }
    },
    // 显示控制台
    // btn_video() {
    //   this.cut = !this.cut;
    // },
    btn_imgs() {
      this.switchs = !this.switchs;
    },
    // 云台方向
    async btn_direction(type) {
      this.direction = type;
      await this.fn(this.direction)
    },
    // 放大画面
    async btn_big(zoomout) {
      this.direction = zoomout;
      await this.fn(this.direction)
    },
    // 缩小画面
    async btn_small(zoomin) {
      this.direction = zoomin;
      await this.fn(this.direction)
    },
    // 停止云台
    async btn_stop() {
      this.direction = 'stop';
      await this.fn(this.direction)
    },
     // 切换通道
     btn_cut(Y , N) {
      if(this.num == 0){
        Y.forEach(i => {
          this.deviceNo = i.deviceNo
          this.channelNo = i.channelNo
      });
      }else{
        N.forEach(i => {
        this.deviceNo = i.deviceNo
        this.channelNo = i.channelNo
      });
      }
      this.getRealTime(this.deviceNo, this.channelNo);
      this.num = (this.num + 1) % 2;
    } ,
    fn(type) {
      let res = http.post(api.holderApi + '/' + this.deviceNo + '/' + this.channelNo + '?' + 'command=' + type + '&' + 'horizonSpeed=' + '255' + '&' + 'verticalSpeed=' + '255' + '&' + 'zoomSpeed=' + '255');
      console.log(res, type);
    },
   
  }
};
</script>
<style scoped>
@import "../../../static/css/realTime/realTime.css";
</style>